<template>
  <el-card style="height: 80px; overflow: hidden">
    <el-form>
      <el-form-item label="分类">
        <el-select v-model="selecter" placeholder="请选择模块">
          <el-option
            v-for="item in select"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-button
          style="margin-left: 10px"
          type="primary"
          icon="Search"
          @click="search"
        >
          查询
        </el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card style="margin-top: 10px">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="expand">
        <template v-slot="scope">
          <el-table
            :data="scope.row.comments"
            border
            :row-key="scope.row.comments.id"
          >
            <el-table-column
              label="评论用户名称"
              prop="nickname"
              width="200px"
            />
            <el-table-column label="评论内容" prop="content"></el-table-column>
            <el-table-column label="评分" prop="comment_rating">
              <template #="{ row }">
                <el-tag type="success" size="large">
                  {{ row.comment_rating }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="评论图片" prop="media_urls" width="300px">
              <template #="{ row }">
                <el-image
                  v-if="row.media_urls"
                  :src="row.media_urls[0]"
                  style="height: 100px"
                  :zoom-rate="1.2"
                  :max-scale="7"
                  :min-scale="0.2"
                  :preview-src-list="row.media_urls.map((item: any) => item)"
                  :initial-index="0"
                  fit="cover"
                  preview-teleported
                ></el-image>
                <el-tag type="info" size="large" v-else>暂无评论图片</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #="{ row }">
                <el-popconfirm
                  :title="`确定${
                    row.is_online == 0 ? '审核通过' : '下架'
                  }这条评论吗？`"
                  width="400px"
                  @confirm="isOnline(row)"
                >
                  <template #reference>
                    <el-button
                      :type="row.is_online == 0 ? 'primary' : 'info'"
                      :icon="row.is_online == 0 ? 'Top' : 'Bottom'"
                    ></el-button>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column label="#" align="center" type="index"></el-table-column>

      <el-table-column :label="labelName" prop="name" />
    </el-table>

    <!-- 分页器 -->
    <el-pagination
      style="margin-top: 10px"
      v-model:current-page="pageNo"
      v-model:page-size="pageSize"
      :page-sizes="[2, 5, 7, 9, 11]"
      :background="true"
      @current-change="getComment"
      @size-change="handler"
      layout="prev, pager, next, jumper,->,sizes,total"
      :total="total"
    />
  </el-card>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { reqComment, reqUpdateIsOnline } from '@/api/front/comment/index'
import { ElMessage } from 'element-plus'

let selecter = ref(0)
let select = ref([
  {
    value: 0,
    label: '美食',
  },
  {
    value: 1,
    label: '旅游',
  },
])
let tableData = ref([])
let pageNo = ref(1)
let pageSize = ref(5)
let total = ref(0)
let labelName = ref('美食餐厅名称')
onMounted(() => {
  getComment()
})
const getComment = async (pager = 1) => {
  pageNo.value = pager
  const result: any = await reqComment(
    pageNo.value,
    pageSize.value,
    selecter.value,
  )
  if (result.code == 200) {
    tableData.value = result.data
    total.value = result.total
  } else {
    ElMessage({
      type: 'error',
      message: '获取数据失败',
    })
  }
}

// 搜索
const search = () => {
  labelName.value = selecter.value == 0 ? '美食餐厅名称' : '旅游景点名称'
  getComment()
}
// 分页器
const handler = () => {
  getComment()
}
// 审核通过/下架
const isOnline = async (row: any) => {
  const isOnline = row.is_online == 0 ? 1 : 0
  const result: any = await reqUpdateIsOnline(row.comment_id, isOnline)
  if (result.code == 200) {
    ElMessage({
      type: 'success',
      message: row.is_online == 0 ? '审核通过' : '下架',
    })
    getComment()
  } else {
    ElMessage({
      type: 'error',
      message: '操作失败',
    })
  }
}
</script>

<style lang="scss" scoped></style>
